<template>
  <div>
    <a-card class="cardBox difficulty">
      <div class="tit" slot="title">重大需求</div>
      <div class="content">
        <div class="diffTit">
          <div class="left"><span>四方面需求</span></div>
          <div class="right">
            <span>12类痛点难点堵点</span>
            <span>36个问题</span>
            <span>8大途径</span>
          </div>
        </div>
        <div class="diffCont" v-for="(item, i) in diffData" :key="`d${i}`">
          <div class="left"><span>{{item.need}}</span></div>
          <div class="right">
            <div>
              <p v-for="(pain, i) in item.painPoint" :key="`p${i}`">{{pain}}</p>
            </div>
            <div class="more">
              <a-popover trigger="click" placement="topRight">
                <template slot="content">
                  <div style="font-size: 16px; padding: 3px 0;" v-for="(list, i) in item.question.list" :key="`l${i}`">{{list}}</div>
                </template>
                {{item.question.label}}
              </a-popover>
            </div>
            <div class="channel">
              <span v-for="(way, i) in item.channel" :key="`w${i}`">{{way}}</span>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <a-modal v-model="demandVisble" width="88%" :footer="null" :centered="true" title="痛点与难点">
      <div class="modalContent">
        <img v-if="demandIndex === 1" src="@/assets/img/xq1.png" class="filesImg">
        <img v-if="demandIndex === 2" src="@/assets/img/xq2.png" class="filesImg">
        <img v-if="demandIndex === 3" src="@/assets/img/xq3.png" class="filesImg">
        <img v-if="demandIndex === 4" src="@/assets/img/xq4.png" class="filesImg">
      </div>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: 'HytBoard3',
    data () {
      return {
        demandIndex: null,
        demandVisble: false,
        diffData: [
          {
            need: '影视人才创业创新',
            painPoint: ['1.没有影视工匠、横漂等影视人才库和影视人才交流平台，演艺背景不清，人才就业难。', '2.演职人员与剧组之间的劳动关系复杂多样，难以科学保障用工时间，演职人员维权难。', '3.演职人员结构多样、流动性大，欠薪隐患难发现、社会福利难覆盖、政府监管难到位。'],
            question: {
              label: '点击查看所有问题 >>',
              list: [
                '1.没有演职人员人才库，关键岗位离职，没有备选人才，容易造成团队洗牌和拍摄停滞。',
                '2.演职人员缺少画像，表演水平参差不齐，特约、武行等没有比选，“作品质量全靠赌”。',
                '3.拍摄情况没有反馈和记录，群演“报而不拍”等现象时常出现，规范管理有心无力。',
                '4.演职人员与剧组之间的劳动关系复杂多样，难以保障科学用工，基本权益维护难。',
                '5.横漂群体流动性大，入职要求低，背景底数不清，生活配套服务难以及时惠及。',
                '6.职业体系不健全、薪酬差异大的现状，直接影响了剧组的成本控制。',
                '7.横漂欠薪隐患发现难、工资争议纠纷多等问题，导致灵活用工监管难。'
              ]
            },
            channel: ['横影通']
          },
          {
            need: '影视基地科学管理',
            painPoint: ['4.影视工业化水平低，没有统一的拍摄标准，拍摄成本难以有效控制。', '5.基地场景供需信息不对称,造成场景利用率低下，拍摄进度无法保障。', '6.供应链缺少公开交易平台，服化道采购渠道单一，竞争不充分，成本难控制。'],
            question: {
              label: '点击查看所有问题 >>',
              list: [
                '1.影视拍摄没有标准化的流程,排景、排期长期依靠经验主义,拍摄时间无法保障。',
                '2.影视项目收支不透明，灯光、器材、剧组人员等账面与实际数量不符，灰色产业链全凭人际关系运营，拍摄成本无法控制。',
                '3.剧组管理没有规范，没有统一采购途径，小到盒饭捞油水、驾驶员偷油卖、大到场景层层转包等行业乱象现象盛行。',
                '4.众多基地没有线上的呈现方式，现场勘景成本高、耗时过长，美术无法提前介入设计。',
                '5.服化道企业仍处于传统的“熟人生意”模式，导致选择范围狭窄、成本高。',
                '6.服化道没有形成规范标准，容易出现元素与剧本背景不符的情况，导致影视作品质量不高。',
                '7.服装、道具等拍摄要素缺少数字标签化处理，适配性不强，导致重复利用率不高。',
                '8.行业内部存在激烈竞争，导致整体效益不够高。',
                '9.热门影视剧戏服广受喜爱，但“戏服的后产业链”没有完善，导致戏服生命力和影视作品生命周期无法延续。',
                '10.传统服化道企业业务辐射范围有限，无法满足横店以外的需求。'
              ]
            },
            channel: ['云勘景', '服化道供应链']
          },
          {
            need: '市场主体降本增效',
            painPoint: ['7.影视拍摄过程和企业日常监管紧密度不高，投资人监管难度大，成本难以有效控制。', '8.影视作品生命周期短，提前部署IP转化意识弱，衍生品开发渠道少。', '9.版权交易缺乏权威平台，版权侵权发现难、维权成本高。'],
            question: {
              label: '点击查看所有问题 >>',
              list: [
                '1.拍摄过程如同“黑匣子”，投资人缺乏对项目执行的管控，超预算、超期等后果都要投资人买单。',
                '2.影视版权交易数字化程度低，没有版权保护和管理平台，无法有力支撑影视作品现代化生产，导致损失很多营收、税收。',
                '3.版权内容价值认定难，影视企业无形资产难以评估，版权内容金融属性差。',
                '4.影视版权确权和存证困难，发现侵权成本高，效率低，不利于营造良好的影视环境。',
                '5.缺乏线上维权和版权纠纷调节的渠道，传统侵权诉讼难，立案难，周期长，成本高。',
                '6.影视后期制作需要购买高性能机器用作视频剪辑，设备昂贵更新周期短，资产安全性差，对小成本影视剧的制作风险变大。',
                '7.后期制作环节，疫情期间人员流动受限，无法支持多人跨域协同剪辑，影响影视制作效率，导致成本增高。',
                '8.传统制作环节割裂严重，拍摄团队与剪辑团队并不协作，出现返工或画面修改情况时，浪费大量成本和时间。',
                '9.产业仍局限在影视作品生产等“小影视”范围内，影视IP内容提前部署意识不强，导致“影视+”的发展潜力开发程度不够。'
              ]
            },
            channel: ['影视制作云', '版权区块链交易', '衍生品交易']
          },
          {
            need: '政府战略目标管理',
            painPoint: ['10.产业数据底数不清，无法精准掌控产业运行态势，分析决策缺乏有效数据支撑。', '11.缺乏企业画像，无法为企业提供特色、精准服务。', '12.部门联动机制不全、服务效率不高、数据共享不足。'],
            question: {
              label: '点击查看所有问题 >>',
              list: [
                '1.集聚区积累了影视企业、剧组和影视作品的一手产业信息，但受制于没有信息化手段，数据没有沉淀，没有形成数据资产。',
                '2.行业企业间信息不对称、政府公共数据资源不能合理使用等,数据碎片化、孤岛化现象亟待改善。',
                '3.分散于多个部门的数据没有充分运用，影视行业数据共享程度不高，中小影视企业行业知识获取成本较高。',
                '4.没有数字化手段国家和各省市产业政策变化等情况，在服务举措、风险应对上相对被动和滞后，无法提供精准高效服务。',
                '5.没有直观监测产业现状的指标体系，产业决策缺乏相应的数据支撑，决策有时“拍脑袋”。',
                '6.产业指数缺乏相应的大数据和算法模型支撑，无法精准预测产业发展态势。',
                '7.对入区企业没有全景画像，缺乏发现高成长、高价值企业的手段。',
                '8.缺乏舆情监测手段，难以帮助中小企业应对限古令、限韩令、限集令等政策变化、艺人暴雷等对企业正常经营带来挑战。',
                '9.集聚区企业存在注册地、办公地和生产地三分离的情况，多部门联动协调难,远程协同服务能力弱。'
              ]
            },
            channel: ['产业综合智治', '政企通']
          }
        ]
      }
    },
    mounted () {

    },
    watch: {
      demandVisble (val) {
        if (!val) {
          this.demandIndex = null
        }
      }
    },
    methods: {
      demandClick (i) {
        this.demandVisble = true
        this.demandIndex = i
      }
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0, 0, 0, .15);

    .tit {
      position: relative;
      padding-left: 8px;
      font-size: 20px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }

  .filesImg {
    max-width: 100%;
    display: block;
    margin: auto
  }

  .modalContent {
    height: auto;
    padding-right: 10px;
    overflow-x: hidden;
    overflow-y: auto;

    .biaoti {
      background: #f8f8f8;
      margin-bottom: 16px;
      font-size: 15px;
      padding: 8px 15px;
      position: relative;
    }

    .biaoti::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: #1890ff
    }
  }

  .difficulty {
    .diffTit {
      display: grid;
      grid-template-columns: 18% 82%;
      font-size: 18px;
      font-weight: bold;

      .right {
        display: grid;
        grid-template-columns: 60% 20% 20%;
      }
    }

    .diffCont {
      display: grid;
      grid-template-columns: 18% 82%;
      margin-top: 15px;
      .left { padding-right: 20px;
        span { display: flex;  justify-content: center; align-items: center; align-content: center;
          height: 100%; width: 100%; border-radius: 6px; font-size: 18px;
        color: #333; background: #97c7e8;
        }
      }
      .right {
        display: grid;
        grid-template-columns: 60% 20% 20%;
        /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#a6d3f3), to(#d9eef9));*/
        background: linear-gradient(to right, #a6d3f3, #d9eef9);
        color: #333;
        padding: 8px 12px; border-radius: 6px; font-size: 16px;
        p{ margin: 0; padding: 0;}
        .more {display: flex;  align-items: center; cursor: pointer}
        .channel {
          display: flex;  justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;
          span { display: block; width: 100%; color: #0172da; font-weight: bold}
        }
      }
    }
    /*.diffCont:nth-child(1){
      .left span{ background: #6a92ed }
    }
    .diffCont:nth-child(2){
      .left span{ background: #E85894 }
    }
    .diffCont:nth-child(3){
      .left span{ background: #a970e1 }
    }
    .diffCont:nth-child(4){
      .left span{ background: #ea7146 }
    }
    .diffCont:nth-child(5){
      .left span{ background: #6a92ed }
    }*/
  }
</style>
